/*
收款统计1
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header/>
    <!-- 列表区 -->
    <el-card  style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <el-form ref="search" :model="search" inline size="small">
            <el-form-item label="创建日期" prop="date">
              <el-date-picker
                v-model="search.date"
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="statisticsType">
              <el-select
                v-model="search.statisticsType"
                placeholder="时间轴单位"
              >
                <el-option
                  v-for="item in searchOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="storeName" label="">
              <el-select
                filterable
                style="width: 100%"
                v-model="search.storeName"
                placeholder="全部门店"
              >
                <el-option
                  v-for="item in stores"
                  :key="item.name"
                  :value="item.name"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="customerNum" label="">
              <el-input v-model="search.customerNum" placeholder="客户号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="query_batchId">
              <el-button type="primary" round @click="getStoreAmount" style="background: #64b0f2">统计</el-button>
              <el-button
                type="warning"
                round
                @click="$refs.search.resetFields()">重置</el-button>
              <el-button type="primary" round @click="exportExcel" style="background: #1bb99a">导出财务表格</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1;overflow: auto">
          <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
            <el-tab-pane label="信息总览" name="1">
              <div class="statistic-box">
                <div class="box" v-for="(item,index) in statisticsData.storeStatistics" :style="{'margin-left':index%2===0?'0':'2%'}">
                  <el-card shadow="hover">
                    <div slot="header" style="text-align: center">
                      <el-link type="primary"> <i class="el-icon-s-home"></i></el-link>
                      {{item.storeName}}({{stores.filter(store => store.name == item.storeName)[0].code}})
                    </div>
                    <el-table
                      :default-sort = "{prop: 'collectionAmount', order: 'descending'}"
                      :data="item.payTypeInfos"
                      height="100%"
                      style="width: 100%">
                      <el-table-column label="收款项合计" prop="payTypeString">
                        <template slot-scope="scope">
                          {{scope.$index+1}}.{{scope.row.payTypeString}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="collectionAmount" :label="'$'+item.paidAmount" sortable>
                      </el-table-column>
                      <el-table-column :label="'退款项合计：$'+item.refundAmount" prop="refundAmount">
                      </el-table-column>

                    </el-table>
                  </el-card>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="'收款总额'+totalAmount+'加元'" name="2">
              <my-line ref="line1"></my-line>
            </el-tab-pane>
            <el-tab-pane :label="'收款总笔数'+totalCount+'个'" name="3">
              <my-line ref="line2" tips="收款笔数：" y-type="个"></my-line>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { dateFormat } from "@/utils";
import myHeader from "@/components/pageHEader/pageHeader";
import { mapGetters } from 'vuex'
import {getStoreAmount,exportExcel} from '@/api/statistics/payment'

import myLine from '../components/myLine'
let search = {
  date:[dateFormat('YYYY-mm-dd',new Date()),dateFormat('YYYY-mm-dd',new Date())],
  statisticsType:'DAY',
  storeName:'',
  customerNum:''
}
export default {
  name: 'payment',
  components:{
    myHeader,
    myLine
  },
  computed: {
    ...mapGetters(["stores"]),
  },
  data(){
    return {
      search:this.cloneObj(search),
      activeName:'1',
      searchOptions:[
        {
          label:'日统计',
          value:'DAY'
        },{
          label:'月统计',
          value:'MONTH'
        },{
          label:'年统计',
          value:'YEAR'
        },
      ],
      statisticsData:{},
      totalAmount:0,
      totalCount:0,
    }
  },
  created() {
    this.getStoreAmount()
  },
  methods:{
    getStoreAmount(){
      this.totalCount = 0
      this.totalAmount = 0
      let query = {
        ...this.handleDate(this.search.date),
        statisticsType:this.search.statisticsType,
        storeName:this.search.storeName,
        customerNum:this.search.customerNum,
      }
      this.activeName = '1'
      getStoreAmount(query).then(resp=>{
        this.statisticsData = resp.data
        this.statisticsData.amountDateInfos.forEach(item=>{
          this.totalAmount+=parseFloat(item.amount)
        })
        this.statisticsData.countDateInfos.forEach(item=>{
          this.totalCount+=parseFloat(item.count)
        })
      })
    },
    exportExcel(){
      let query = {
        ...this.handleDate(this.search.date),
        storeName:this.search.storeName,
        customerNum:this.search.customerNum,
      }
      this.download(exportExcel(query),{},'get')
    },
    handleTabClick(tab){
       if(tab.name == 2){
         this.$nextTick(()=>{
           let xData = this.statisticsData.amountDateInfos.map(item=>item.dateString)
           let yData = this.statisticsData.amountDateInfos.map(item=>item.amount)
           this.$refs.line1.init(xData,yData)
         })
       }
      if(tab.name == 3){
        this.$nextTick(()=>{
          let xData = this.statisticsData.countDateInfos.map(item=>item.dateString)
          let yData = this.statisticsData.countDateInfos.map(item=>item.count)
          this.$refs.line2.init(xData,yData)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  /deep/ .el-tabs{
    height: 100%;
  }
  /deep/ .el-tabs--border-card{
    box-shadow: unset;
  }
  /deep/ .el-tabs__content{
    height: calc(100% - 40px);
    &>div{
      height: 100%;
    }
  }

  .statistic-box{
    display: flex;
    height: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    .box{
      width: 49%;
      height: 49%;
    }
    /deep/.el-card__body{
      height:calc(100% - 50px)
    }
  }
</style>
